<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="canvas" style="display:block;border:1px solid #ccc; margin:20px auto;"></canvas>
	<input type="range" id="slide" min="0.5" max="3.0" step="0.01" value="1.0" style="display:block;margin:20px auto;width:800px;" />
	<script type="text/javascript">
		var canvas=document.getElementById('canvas');
		var slide=document.getElementById('slide');
		var context=canvas.getContext('2d');
		var image=new Image();
		window.onload=function(){
			canvas.width=600;
			canvas.height=600;
			image.src="img.jpg";
			image.onload=function(){
				var scale=slide.value;
				drawImageScale(scale);
				slide.onmouseout=function(){
					scale=slide.value;
					drawImageScale(scale);
				}

			}
		}
		function drawImageScale(scale){
			context.clearRect(0,0,canvas.width,canvas.height);
			var dx=(canvas.width/2-image.width/2)*scale;
			var dy=(canvas.height/2-image.height/2)*scale;
			context.drawImage(image,dx,dy,image.width,image.height);
		}
	</script>
</body>
</html>